main{
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: white;
}
#baccol{
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0;
	filter: blur(15px);
	z-index: -10;
}
#song{
	height: 6vh;
	text-align: center;
	font-size: 6vh;
	margin: 1vh;
}
#singer{
	height: 5vh;
	text-align: center;
	margin: 1vh;
	font-size: 4vh;
}
#star{
	display: block;
	width: 50vh;
	height: 50vh;
	margin: 5vh auto;
	border-radius: 50%;
	background-size: 100%;
	overflow: hidden;
}
.firstClass{
	animation: rotate 20s linear infinite;
}
@keyframes rotate{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}

#progress{
	margin: 0 auto;
	width: 85vw;
}
#input1{
	width: 75vw;
	height: 4px;
	display: block;
	margin: 0 auto;
	/*background-color: green;*/
}
#bar{
	width: 80%;
	height: 5px;
}
span{
	font-size: 2vh;
}
span:nth-of-type(1){
	float: left;
	position: relative;
	top: -1.1vh;
	left: 1.5vh;
}
span:nth-of-type(2){
	float: right;
	position: relative;
	top: -2vh;
	left: 2vh;
}

#control{
	text-align: center;
	margin-top: 2vh;
}
#control img:nth-of-type(1){
	width: 7vh;
	position: relative;
	left: -2vh;
	top: -1vh;
}
#control img:nth-of-type(2){
	width: 10vh;
	position: relative;
	left: 3vh;
}
#control img:nth-of-type(3){
	width: 7vh;
	position: relative;
	left: 8vh;
	top: -1vh;
}

#volume{
	text-align: center;
}
#volume img:nth-of-type(1){
	width: 3vh;
}
#volume img:nth-of-type(2){
	width: 3vh;
}

#input2{
	background-color: green;
	height: 2px;
	position: relative;
	top: -1vh;
}
input[type=range] {
	background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
background-size: 0% 100%;
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 10px; /*将轨道设为圆角的*/
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 13px;
    width: 13px;
    margin-top: -3px; /*使滑块超出轨道部分的偏移量相等*/
    background: #ffffff; 
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
}



